<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .clearfix:after{content:'.';display:block;clear:both;height:0;visibility:hidden;overflow:hidden;}
    .clearfix{zoom:1;}
    #box {width: 385px;height:220px;background-color: #00a1cc;overflow-x:hidden;overflow-y:hidden;white-space:nowrap;position: relative;}
    #content img,#content1 img{font-size: 0;float: left;}
    #content,#content1{font-size: 0;float: left;}
    #box,#box3{float:left;}
    #box3 {width: 385px;height:220px;background-color: #00a1cc;overflow-x:hidden;overflow-y:hidden;white-space:nowrap;position: relative;}
    #content3 img,#content31 img{font-size: 0;float: left;}
    #content3,#content31{font-size: 0;float: left;}
    
    #box2{width:385px;height:220px;overflow-x:hidden;overflow-y:hidden;}
    #content21 img,#content2 img{font-size:0;vertical-align:bottom;}  /*vertical-align,让父元素高度自动计算值等于图片高度*/
    #box4{width:385px;height:220px;overflow-x:hidden;overflow-y:hidden;}
    #content41 img,#content4 img{font-size:0;vertical-align:bottom;}
  </style>
</head>
<body>
  <div id="box">
    <div style="width:3680px" class="clearfix">
        <div id="content" class="clearfix">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
        <div id="content1" class="clearfix">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
    </div>
  </div>
  <div id="box2">
    <div class="clearfix">
        <div style="height:1100px;" id="content2" class="clearfix">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
        <div style="height:1100px;" id="content21" class="clearfix">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
    </div>
  </div>
  <div id="box3">
    <div style="width:3680px" class="clearfix">
        <div id="content3" class="clearfix">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
        <div id="content31" class="clearfix">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
    </div>
  </div>
  <div id="box4">
    <div class="clearfix">
        <div style="height:1100px;" id="content4" class="clearfix">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
        <div style="height:1100px;" id="content41" class="clearfix">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
    </div>
  </div>
  <script>
    doMove('box','content','scrollLeft',0,2,50);
    doMove('box2','content2','scrollHeight',0,1,100);
    doMove('box3','content3','scrollLeft',1840,-2,50);
    doMove('box4','content4','scrollHeight',1100,-1,100);
    function doMove(id1,id2,scrollDir,originalPosition,step,fps){
      var boxObj = document.getElementById(id1);
      var contentObj = document.getElementById(id2);
      var t;
      var m = 1000/fps;
      if(originalPosition > 0){
        if(scrollDir == 'scrollLeft'){
          boxObj.scrollLeft = originalPosition;
        }else{
          boxObj.scrollTop = originalPosition;
        }
        t = setInterval(move1,m);
      }else{
        t = setInterval(move,m);
      }
      function move1 () {
        if(scrollDir == 'scrollLeft'){
          if(boxObj.scrollLeft <= 0){
            boxObj.scrollLeft = originalPosition;
          }else{
            boxObj.scrollLeft += step;
          }
        } else if(scrollDir == 'scrollHeight'){
            if(boxObj.scrollTop <= 0){
              boxObj.scrollTop = originalPosition;
            }else{
              boxObj.scrollTop += step;
            }
        }
      }
      function move () {
        if(scrollDir == 'scrollLeft'){
          if(boxObj.scrollLeft >= contentObj.scrollWidth){
            boxObj.scrollLeft = originalPosition;
          }else{
            boxObj.scrollLeft += step;
          }
        } else if(scrollDir == 'scrollHeight'){
            if(boxObj.scrollTop >= contentObj.scrollHeight){
              boxObj.scrollTop = originalPosition;
            }else{
              boxObj.scrollTop += step;
            }
        }
      }
    }


  </script>
</body>
</html>